<style scoped lang="less">
</style>
<template>
	<iot-blk class="today-blk kitchen-device" title="设备统计" :moreType="0">
		<div class="stat flex">
			<div class="flex-1 pointer" @click="showDevice('0')">
				<p class="fm-num" style="color:#0EFF9E">{{data.businessCount}}</p>
				<p>厨房接入数</p>
			</div>
			<div class="flex-1 pointer" @click="showDevice('')">
				<p class="fm-num" style="color:#0EFF9E">{{data.deviceCount}}</p>
				<p>摄像机数量</p>
			</div>
		</div>
		<!-- list start -->
		<el-dialog v-if="listModalVisible" title="设备列表" :visible.sync="listModalVisible" :width="1200*scale + 'px'" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close append-to-body>
			<List :scale="scale" :type="type" :state="activeState"></List>
		</el-dialog>
		<!-- list end -->
	</iot-blk>
</template>
<script>
import { mapState } from 'vuex'
import List from '@/components/iot/DeviceList.vue'
export default {
	name: 'IOTDevice',
	components: {
		List
	},
	props: {
		type: {
    		type: String,
			default: 'fireControl'
    	},
    	data: {
    		type: Object,
			default () {
				return {}
			}
    	},
	},
	computed: {
		...mapState([
			'scale'
		])
	},
	watch: {},
	data () {
		return {
			loading: false,
			listModalVisible: false,
			activeState: ''
		}
	},
	methods: {
		showDevice(deviceState){
			this.activeState = deviceState
			this.listModalVisible = true
		}
	},
	created () {
		// 
	},
}
</script>